<template>
  <view class="t-login">
    <!-- 页面装饰图片 -->
    <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image> 
    <image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image> 
    <!-- 标题 -->
    <view class="t-b">{{ title }}</view>
    <view class="t-b2">欢迎使用，宠物店小程序</view>
    <form class="cl">
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image> 
        <view class="line"></view>
        <input type="text" name="email" placeholder="请输入邮箱" v-model="email" />
      </view>
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image> 
        <view class="line"></view>
        <input type="password" name="password" maxlength="6" placeholder="请输入密码" v-model="password" />
      </view>
      <button @tap="login()">登 录</button>
      <view class="register-link">
        <view @tap="navigateToRegisterAccount">注册账号</view>
        <view @tap="navigateToResetPassword">忘记密码？</view>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '欢迎回来！', 
      email: '', 
      password: '' 
    };
  },
  methods: {
    login() {
      const { email, password } = this;
      if (!email) {
        uni.showToast({ title: '请输入邮箱', icon: 'none' });
        return;
      }
      if (!password) {
        uni.showToast({ title: '请输入密码', icon: 'none' });
        return;
      }
      uni.request({
        url: 'http://localhost:8887/user/login',
        method: 'POST',
        data: {
          email: email,
          password: password
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: (res) => {
          if (res.data.code === 200 && res.data.success) {
            // 缓存token
            uni.setStorageSync('Authorization', res.data.data);
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            // 跳转到首页
            uni.switchTab({
              url: '/pages/index/index'
            });
          } else {
            uni.showToast({
              title: res.data.message,
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请检查网络',
            icon: 'none'
          });
        }
      });
    },
	 navigateToRegisterAccount() {
	      uni.navigateTo({
	        url: '/pages/register/register'
	      });
	    },
	    navigateToResetPassword() {
	      uni.navigateTo({
	        url: '/pages/updatepassword/updatepassword'
	      });
	    }
  }
};
</script>

<style>
.img-a {
  position: absolute;
  width: 100%;
  top: -150rpx;
  right: 0;
}
.img-b {
  position: absolute;
  width: 50%;
  bottom: 0;
  left: -50rpx;
  /* z-index: 1; */
}
.t-login {
  width: 650rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
}

.t-login button {
  font-size: 28rpx;
  background: #5677fc;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 50rpx;
  background: #f8f7fc;
  border: 1px solid #e9e9e9;
  font-size: 28rpx;
  border-radius: 50rpx;
}

.t-login .t-a {
  position: relative;
}

.t-login .t-a image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
  margin-right: 20rpx;
}
.t-login .t-a .line{
  width: 2rpx;
  height: 40rpx;
  background-color: #dedede;
  position: absolute;
  top: 28rpx;
  left: 98rpx;
}

.t-login .t-b {
  text-align: left;
  font-size: 46rpx;
  color: #000;
  padding: 300rpx 0 30rpx 0;
  font-weight: bold;
}
.t-login .t-b2 {
  text-align: left;
  font-size: 32rpx;
  color: #aaaaaa;
  padding: 0rpx 0 120rpx 0;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}
.register-link {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #5677fc;
   z-index: 1; 
    position: relative;
}

.register-link view {
  cursor: pointer;
}
</style>